<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="common/layout">

<head>
    <title>台桌二维码列表</title>
</head>
<body style="overflow-y: hidden">

<section layout:fragment="extra_scripts">

    <script th:inline="javascript">
        function edit_cancel() {
            self.location.href = '/admin/table';
        }
        function save_pic(imgPathURL, imgName) {
            var $a = $("<a target='_blank' ></a>").attr("href", imgPathURL).attr("download", imgName+".png");
            $a[0].click();
            $a.remove();
        }

        $(function(){
            $("#all_t").click(function(){
                $(".qrcode input[type='checkbox']").prop('checked',$(this).prop('checked'));
            });

            $("#qr_download").click(function(){
                alert("请直接点击二维码图片下载");
                var downloads = [];
                $(".qrcode input[type='checkbox']:checked").each(function(){
                    downloads.push($(this).val());
                });
                var data = {
                    download_ids: downloads.join(","),
                };
                console.log(data);
                return;
                /*$.ajax("/admin/table/download", {
                    data: JSON.stringify(data),
                    type: "post",
                    contentType: 'application/json',
                }).done(function(data) {
                    if (data.valid) {
                        self.location.href = data.url || '/';
                    } else {
                        alert(data.errorMsg);
                    }
                });*/
            });
        });

    </script>
</section>

<section layout:fragment="top_menu" style="text-align: left;padding-left: 20px">
    <span style="font-size: 20px">下载二维码</span>
</section>

<section layout:fragment="content">
    <div class="qrcode_all_ctr">
        <input id="all_t" type="checkbox">
        <label for="all_t" style="margin-left: .1rem">全选</label>
    </div>
    <div style="margin-left: 3rem;margin-right: 3rem;">
        <div class="qrcode" >
            <div th:each="dingtable :${tables}">
                <input th:id="${dingtable.id}" type="checkbox" th:value="${dingtable.id}" >
                <label th:for="${dingtable.id}" th:text="${dingtable.name}"></label>
                <img th:name="${dingtable.name}" th:if="${dingtable.qrcImg}" th:src="${dingtable.qrcImg}" width="100" height="100" onclick="save_pic(this.src,this.name);return false;">
                <img th:name="${dingtable.name}" th:unless="${dingtable.qrcImg}" src="/img/avatar.png" width="100" height="100" onclick="save_pic(this.src, this.name);return false;">
            </div>
        </div>
    </div>
    <div class="qrcode_btn_div">
        <input id="qr_download" type="button" class="new_button_yellow" value="下载">
        <input type="button" onclick="javascript:edit_cancel()"  class="new_button_yellow" value="取消">
    </div>

</section>

</body>

</html>